<template>
	<view class="goods-seckill-item" @click="pageRoute('/pages/product/product-detail/product-detail?goods_id='+goods.id)">
		<view class="thumb-box">
			<image class="thumb" :src="goods.logo" mode="aspectFill"></image>
		</view>
		<view class="info">
			<view class="name">{{goods.name}}</view>
			<view class="desc">{{goods.description}}</view>
			<view class="count" v-if="goods.sales_sum>0">{{goods.sales_sum}}人已购买</view>
			<!-- <view class="tag">
				<text class="label">比市场价低2.98元</text>
				<text class="num">限购1件</text>
			</view> -->
			<view class="other">
				<view class="price">
					<!-- <uni-icons type="icon-meirimiaosha" custom-prefix="iconfont" color="#e50909" size="18"></uni-icons>
					<text class="label">秒杀</text> -->
					<text class="unit">￥</text>
					<text class="value">{{goods.sale_price}}</text>
				</view>
				<view class="icon-wrap"
					@click.stop="pageRoute('/pages/order/order-confirm/order-confirm?goods_id='+goods.id)">
					<uni-icons type="cart-filled" color="#fff" size="20" :color="themeColor.theme"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import cache from '@/utils/cache';
	import {
		reactive,
		toRefs,
		defineProps
	} from 'vue';

	defineOptions({
		name: 'goods-seckill-item'
	});

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
	});

	const props = defineProps({
		goods: {
			type: [Array, Object],
			default: () => { //定义默认值
				return []
			}
		},
	})

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	};

	const {
		themeColor,
	} = toRefs(state);
</script>

<style lang="scss">
	.goods-seckill-item {
		@include f-between;
		padding: $margin-24 0;
		border-bottom: 1rpx solid mix($white-color, $border-color, 45%);

		&:last-child {
			border-bottom: none;
		}

		.thumb-box {
			overflow: hidden;
			width: 220rpx;
			height: 220rpx;
			background-color: $bg-color;
			border-radius: $radius-8;

			.thumb {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			position: relative;
			flex: 1;
			margin-left: $margin-24;
			height: 280rpx;

			.name {
				@include ellipsis(2);
				height: 80rpx;
				color: $main-color;
				font-weight: 500;
			}

			.desc {
				margin-top: $margin-8;
				font-size: $font-24;
				color: mix($black-color, $warning-color, 50%);
			}

			.count {
				margin-top: $margin-8;
				font-size: $font-24;
				color: $tips-color;
			}

			.tag {
				display: inline-flex;
				align-items: center;
				margin-top: $margin-24;
				border: 1rpx solid $error-color;
				border-radius: $radius-8;

				.label,
				.num {
					padding: .3em .6em;
					font-size: $font-22;
				}

				.label {
					background-color: $error-color;
					color: $inverse-color;
				}

				.num {
					color: $error-color;
				}
			}

			.other {
				@include f-between;
				position: absolute;
				bottom: 0;
				width: 100%;

				.price {
					color: $error-color;

					.label {
						font-size: $font-24;
					}

					.unit {
						font-size: $font-24;
					}

					.value {
						font-size: $font-32;
						font-weight: bold;
					}
				}

				.icon-wrap {
					@include f-center;
					width: 48rpx;
					height: 48rpx;
					background-color: $warning-color;
					border-radius: $radius-circle;
				}
			}
		}
	}
</style>